<template>
   <div class="msg-box">
        <div class="title">基本信息</div>
        
     
        <div class="msg-form"> 
            <el-form  :model="ruleForm" status-icon :rules="rules" ref="update" label-width="100px" class="demo-ruleForm">
                <el-form-item label="昵称" prop="nickname">
                    <el-input type="text" v-model="ruleForm.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio v-model="ruleForm.gender" label="1">男</el-radio>
                    <el-radio v-model="ruleForm.gender" label="0">女</el-radio>
                </el-form-item>
                <el-form-item label="生日" prop="birthday">
                    <el-date-picker v-model="ruleForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="生活状态" >
                    <el-radio v-model="ruleForm.status" label="1">单身</el-radio>
                    <el-radio v-model="ruleForm.status" label="2">热恋</el-radio>
                    <el-radio v-model="ruleForm.status" label="2">已婚</el-radio>
                    <el-radio v-model="ruleForm.status" label="2">为人父母</el-radio>
                </el-form-item>

                <el-form-item label="从事行业" >
                    <el-select v-model="ruleForm.industry" placeholder="请选择">
                        <el-option value="计算机" label="计算机"></el-option>
                        <el-option value="操作员" label="操作员"></el-option>
                        <el-option value="其他" label="其他"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="个人图像" >
                    <el-upload
                        class="avatar-uploader"
                        name="icon"
                        action="http://localhost:3000/users/upload/img"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :headers="headerObj"
                        >
                        
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="个性签名" >
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="ruleForm.sign">
                        </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('update')">提交</el-button>
                    <el-button @click="resetForm('update')">重置</el-button>
                </el-form-item>

            </el-form>     
        </div>
    </div>
</template>

<script>
import axiosEl from '@/utils/axios';
export default {
    data(){
        return {
            headerObj:{},
            imageUrl:'',
            ruleForm:{},
            rules:{
                nickname:[
                    {required: true, message: '请输入昵称', trigger: 'blur'}
                ],
                gender:[
                    {required: true, message: '请选择性别', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw); 
        
        this.ruleForm.icon = res.data;
      },
 
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
     async getUserDetail(){
        let resData = await axiosEl({
                    method:'get',
                    url:'/users/detail'
                })
        console.log(resData);
        this.ruleForm = resData.data;
        
      },
        submitForm(){
            this.$refs.update.validate(async (valid)=>{
                if(!valid){
                    return;
                }
                this.ruleForm
               let resData = await axiosEl({
                    method:'post',
                    url:'/users/update/info',
                    // headers:{
                    //     'Content-Type':'multipart/form-data'
                    // },
                    data:this.ruleForm

                })
                if(resData.code==1) {
                    console.log('成功');
                } else {
                    console.log('失败');
                    
                }
            })
        }
    },
    mounted(){
        var token = localStorage.getItem('token');
        this.headerObj = {
            'Authorization':'Bearer '+token
        }

        this.getUserDetail();
    }
}
</script>

<style lang="scss" scoped>
.msg-form {
    width: 500px;
    margin:50px;
}
::v-deep  {
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
 
</style>